<template>
    <div>
      <div style="width: 100%">
        <el-input placeholder="输入姓名"  style="width: 250px" v-model="sname" />
        <el-input placeholder="输入电话"  style="width: 250px" v-model="phone" />
        <el-button @click="getAllSecton" type="primary" icon="el-icon-search"
          >查询</el-button
        >
      </div>
      <div style="float: left;">
        <el-button type="success" icon="el-icon-plus" @click="addHead">新增</el-button>
      </div>
    
      <div style=" width: 100%;float: left;background-color: #E4F2FF; border: 1px solid #6AB7FE; margin: 10px 0px; height: 40px; line-height: 40px;"><i class="el-icon-user-solid" style="color: #6AB7FE; line-height: 40px;"></i><label style="font-size: 14px;"> {{ hosName }} 科室负责人总数：{{ pageInfo.total }}</label></div>

      <el-table
        ref="multipleTable"
        :data="pageInfo.list"
        tooltip-effect="dark"
        style="width: 100%; margin: 0px auto"
      >
      <el-table-column
          prop="sname"
          label="负责人姓名"
           width="auto"
        ></el-table-column>
        <el-table-column
          prop="tbUser.phone"
          label="电话号码"
           width="auto"
        ></el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          width="auto"
        ></el-table-column>
      <el-table-column
          prop="tbDepartment.dname"
          label="科室名"
           width="auto"
        ></el-table-column>
        
        <el-table-column prop="tbHospital.hname" label="所属医院" width="200" ></el-table-column>
        
       
        
        <!---操作列--->
         <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="assignment(scope.row)"
              v-if="scope.row.did==undefined">分配科室</el-button
            >
            <el-button size="mini" type="warning" icon="el-icon-remove" @click="removeHeadHid(scope.row)"
              v-if="scope.row.did!=undefined">取消分配</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        
      >
      </el-pagination>
      <!-- 添加模态框开始 -->
    <el-dialog title="添加科室负责人" :visible.sync="addVisable">
      <el-form ref="form" :model="form" label-width="100px" @keyup.native.enter="saveAddHead">
  <el-form-item label="手机号码">
    <el-input v-model="form.phone"></el-input>
  </el-form-item>
  <el-form-item label="姓名">
    <el-input v-model="form.sname"></el-input>
  </el-form-item>
  <el-form-item label="性别">
    <el-radio-group v-model="form.gender">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
    </el-radio-group>
  </el-form-item>

  
  
</el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addVisable=false">取 消</el-button>
        <el-button type="primary" @click="saveAddHead">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加模态框结束 -->
      <!-- 分配模态框开始 -->
    <el-dialog title="分配科室" :visible.sync="assVisable">
        <el-form ref="form" :model="region" label-width="100px">

      <el-form-item label="选择科室">
    <el-select v-model="region.id" placeholder="请选择科室">
        <el-option
      v-for="item in departList"
      :key="item.did"
      :label="item.dname"
      :value="item.did">
    </el-option>
    </el-select>
  </el-form-item>
  </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="assVisable=false">取 消</el-button>
        <el-button type="primary" @click="saveAssHead">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配模态框结束 -->
    
    </div>
  </template>
  <style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  </style>
  <script>
  import { getAll ,addHead, removeHead, getNullDep, assDepart} from "../api/DepartmentHeadManagement";
  
  export default {
    data() {
      return {
        pageInfo: {
          pageNum: 1,
          pageSize: 10,
        },
        phone: "",
        sname: "",
        did: "",
        hid: "",
        hospital: [],
        department: [],
        form:{},
        addVisable:0,
        assVisable:0,
        assHeadid:"",
        departList:[],
        region:{},
        hosName:""
      };
    },
    methods: {
        saveAssHead(){

            assDepart({
                did:this.region.id,
                uid:this.assHeadid
            }).then(res=>{
                if(res.data.code == 200){
                    this.$message.success('分配成功！')
                    this.assVisable = 0
                    this.getAllSecton()
                }
            })
        },
        assignment(row){
            this.assVisable = 1
            this.assHeadid = row.sid
            getNullDep().then(res=>{
                this.departList = res.data.data
            })
            this.region = {}
        },
        removeHeadHid(row){
            removeHead(row.sid).then(res=>{
                if(res.data.code == 200){
                    this.$message.success("医院取消分配成功")
                    this.getAllSecton()
                }
            })
        },
        saveAddHead(){
            addHead(this.form).then(res=>{
                if(res.data.code == 200){
                    this.$message.success("新增成功，初始密码为123456")
                    this.addVisable = 0
                    this.getAllSecton()
                }
            })
        },
        addHead(){
            this.form = {}
            this.addVisable = 1
        },
      getAllSecton() {
        getAll({
          pageNum: this.pageInfo.pageNum,
          pageSize: this.pageInfo.pageSize,
          phone: this.phone,
          sname: this.sname,
          did: this.did,
          hid: this.hid,
        }).then((res) => {
          if (res.data.code == 200) {
            this.pageInfo = res.data.data;
            this.hosName = this.pageInfo.list[0].tbHospital.hname
            this.phone = "";
            this.hid = "";
            this.did = "";
            this.sname = "";
          }
        });
      
      },
      //val=改变之后的条目数
      handleSizeChange(val) {
        this.pageInfo.pageSize = val;
        this.pageInfo.pageNum = 1;
        this.getAllSecton();
      },
      //改变之后的当前页
      handleCurrentChange(val) {
        this.pageInfo.pageNum = val;
        this.getAllSecton();
      },
    },
    mounted() {
      this.getAllSecton();
    },
  };
  </script>